<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>我的用户中心</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/theme/css/imgareaselect-animated.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/theme/css/main.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/theme/css/style_userCenter.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/theme/js/jquery-1.6.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/theme/js/jquery.imgareaselect.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/theme/js/ajaxfileupload.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/theme/js/jquery.validate.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/theme/js/additional-methods.js" charset="utf-8"></script>
<script type="text/javascript">
function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
  
    $('#user_img + div > img').css({
        width: Math.round(scaleX * 400) + 'px',
        height: Math.round(scaleY * 400) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}

$(function () {
    $('<div><img src="${pageContext.request.contextPath}/theme/images/user/default.gif" style="position: relative;" width="100px" height="100px"/></div>')
        .css({
            position: 'relative',
            overflow: 'hidden',
            width: '100px',
            height: '100px'
        })
        .insertAfter($('#user_img'));

    $('#user_img').imgAreaSelect({ aspectRatio: '1:1', 
    						  onSelectChange: preview, 
    						     onSelectEnd: function (img, selection)
    						     {
    						     	var imgSize = selection.x1 + "," + selection.y1 + "," + selection.x2 + "," + selection.y2;
    						     	$('input[name="imgSize"]').val(imgSize);
    						     }});

});

function uploadAvatar()
{
	$.ajaxFileUpload
	({
			url:'${pageContext.request.contextPath}/userAdmin/uploadAvatar.action',
			secureuri:false,
			fileElementId:'avatarFile',
			dataType: 'json',
			beforeSend:function()
			{
				$("#loading").show();
			},
			complete:function()
			{
				$("#loading").hide();
			},				
			success: function (data, status)
			{
				if(data.msg != '')
				{
					alert(data.msg);
				}
				else
				{
					$("#user_img").attr("src", "${pageContext.request.contextPath}"+ data.url);
					$("#user_img + div > img").attr("src", "${pageContext.request.contextPath}"+ data.url);
					$("#avatarUrl").val(data.url);
				}
			},
			error: function (data, status, e)
			{
				alert(e);
			}
		})
	
	return false;
}
</script>
  </head>
  <body>
	<div>
		<jsp:include page="../nav.jsp">
			<jsp:param value="nav_account" name="nav"/>
		</jsp:include>
	</div>
	<div class="realCer">
	
	<!--主体部分-->
	<div class="realMain clearfix mt10">
	 <!--左侧菜单-->
	<div class="realLeft" id="meunLeft">
	    <jsp:include page="../leftMenu.jsp">
	    	<jsp:param value="con_nav_account" name="con_nav"/>
	    	<jsp:param value="userAvatarManagement" name="selectMenu"/>
	    </jsp:include>
    </div>
    <!--中由-->
	<div class="realRight ml10">
		<!--中间-->
		<div class="realR_left">
			<div class="box">
				<div class="tit">修改头像</div>
							<div class="con">
								<div class="container">
									<div>
										<div>
											<input class="default_btn" type="button" value="本地上传" onclick="$('#avatarFile').click();"/>
											<div style="display: none;">
											<input type="file" name="avatarFile" id="avatarFile"
											onchange="uploadAvatar();" />
											</div>
										</div>
										
										<span id="loading" style="display: none;"><img
												src="${pageContext.request.contextPath}/theme/images/loading.gif">
										</span>
									</div>
									<div>
										<img id="user_img"
											src="${pageContext.request.contextPath}/theme/images/user/default.gif"
											style="float: left; margin-right: 10px;" width="400px"
											height="400px" />
										<div class="fl">
											<s:url var="editAvatarUrl" action="editAvatar"
												namespace="/userAdmin"></s:url>
											<form action="<s:property value="#editAvatarUrl"/>" method="post">
												<input type="hidden" name="imgSize" id="imgSize">
												<input type="hidden" name="avatarUrl" id="avatarUrl"
													value="/theme/images/loading.gif" />
												<input class="default_btn" type="submit" value="保存" />
										</div>
									</div>
									
									</form>
								</div>
							</div>
						</div>
		</div>
		<!-- 中间 -->
		<!--右侧-->
		<div class="realR_right">	
				
			<div class="box mb10">
				<div class="tit">雇主说</div>
				<div class="con">			
				  44444444444444
				</div>
			</div>
			
		</div>
		<!--右侧-->
	</div>
	<!--中由-->
</div>
</div>
	<div>
		<jsp:include page="/footer.jsp"></jsp:include>
	</div>
    </body>
</html>